<template>
  <div class="home_carousel_box">
    <Swiper :vertical="vertical" :show_indicators="show_indicators">
      <!--      <van-swipe-item-->
      <!--      ><a href="#"><img src="../../../assets/imge/3.jpeg" alt="1" /></a-->
      <!--      ></van-swipe-item>-->
      <!--      <van-swipe-item-->
      <!--        ><a href="#"><img src="../../../assets/imge/1.jpeg" alt="1" /></a-->
      <!--      ></van-swipe-item>-->
      <!--      <van-swipe-item-->
      <!--        ><a href="#"><img src="../../../assets/imge/2.jpeg" alt="" /></a-->
      <!--      ></van-swipe-item>-->
      <van-swipe-item v-for="item in carouselList" :key="item.swipe_id"
        ><a href="#"><img :src="item.swipe_image" alt="" /></a
      ></van-swipe-item>
    </Swiper>
  </div>
</template>

<script>
import Swiper from "../../../components/carousel/Swiper";
import { ref } from "vue";
import { getCarousel } from "../../../api/home";
export default {
  name: "HomeCarousel",
  components: { Swiper },
  setup() {
    //轮播方向及子按钮显示
    const vertical = ref(true);
    const show_indicators = ref(true);
    //数据
    const carouselList = ref([]);
    getCarousel().then((res) => {
      // console.log(res);
      //轮播状态:display 展示
      carouselList.value = res.data.filter((item) => item.status == "display");
    });
    return {
      vertical,
      show_indicators,
      carouselList,
    };
  },
};
</script>

<style scoped lang="less">
.home_carousel_box {
  width: 95%;
  height: 10rem;
  box-sizing: border-box;
  border-radius: 1rem;
  overflow: hidden;
  margin: 3.5rem auto 0.5rem;
  //margin: 3.5rem 0 0.5rem 0;
  box-shadow: 1px 1px 6px #d4c7c7;
  /*border: 1px dashed red;*/
}
.van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  //background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
